<template>
    <nav aria-label="pagination">
        <ul class="pagination">
            <li>
                <a href="javaScript:;" @click="prev">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="visuallyhidden">previous set ofpages</span>
                </a>
            </li>
            <li v-for="i in pageCount" v-bind:key="i" :class="{ active: i-1 == page }">
                <a href="javaScript:;"  @click="handleCurrentChange(i-1)" :class="{ active: i-1 == page }">
                    <span class="visuallyhidden">page </span> {{ i }}
                </a>
            </li>
            <li>
                <a href="javaScript:;" @click="next">
                    <span class="visuallyhidden">next set of pages</span>
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
export default {
    name: 'Pagination',
    props: {
        total: {
            type: Number,
            default: 20
        },
        pageSize: {
            type: Number,
            default: 5
        },
        courrentPage: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            page: this.courrentPage
        }
    },
    computed: {
        pageCount() {
            return Math.ceil(this.total / this.pageSize);
        },
    },
    watch: {
        page(val) {
            this.handleCurrentChange(val);
        },
        courrentPage(val) {
            this.page = val;
        }

    },
    methods: {
        next() {
            this.page++;
        },
        prev() {
            this.page--;
        },
        handleSizeChange(val) {
            this.$emit('pageSizeChange', val);
        },
        handleCurrentChange(val) {
            this.$emit('currentChange', val);
        }
    },
}
</script>
<style scoped>
.active{
    background-color: #ccc;
    color: black;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

nav {
    display: flex;
    justify-content: end;
}

nav ul {
    margin: 0;
    padding-left: 0;
}

.pagination a {
    display: block;
    padding: 0.5em 1em;
    border: 1px solid #999;
    border-radius: 0.2em;
    text-decoration: none;
    color: black;
}

.pagination {
    list-style: none;
    display: flex;
}

.pagination a[aria-current="page"] {
    background-color: #333;
    color: #fff;
}

.pagination li:hover {
    background-color: #333;
}

.pagination a:hover {
    color: #fff;
}
</style>